<template>
	<view class="addresslist">
		<view v-if="addressList.length > 0">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="single" v-for="(item, index) in addressList" :key="item.id" :class="{ ischoose: type }">
					<view v-if="type">
						<uni-icons type="circle" size="20" color="#F54642" class="uncheck_icon"
							v-if="item.checked | (addressinfo && (item.id == addressinfo.id))"
							@click="changeIcon(item, index)"></uni-icons>
						<uni-icons type="circle" size="20" color="#999999" class="uncheck_icon"
							v-else
							@click="changeIcon(item, index)"></uni-icons>
					</view>

					<view class="username">
						<text>{{ item.name }}</text>
						<text class="tel">{{ item.tel }}</text>
					</view>
					<view class="address_detail">
						<text style="width: 90%">{{ item.province_name }} {{ item.city_name }}
							{{ item.district_name }} {{ item.addr }}</text>
						<image class="edit_icon" :src="IMGLink + '/my/edit_icon.png'" mode="widthFix"
							@click="goPage('/pagesA/my/address/addLocate', item, 'edit')"></image>
					</view>

					<view class="operates">
						<view class="flexlayout" @click="isDefault(item)">
							<image v-if="item.defaults == 1" class="default_img"
								:src="IMGLink + '/my/address_active.png'" mode="widthFix"></image>
							<image v-else class="default_img" :src="IMGLink + '/my/address_unactive.png'"
								mode="widthFix">
							</image>
							<text>设置为默认地址</text>
						</view>
						<view class="flexlayout" @click="isDelete(item)">
							<image class="delete_icon" :src="IMGLink + '/my/delete_icon.png'" mode="widthFix"></image>
							<text>删除</text>
						</view>
					</view>
				</view>
			</scroll-view>

			<button type="default" class="add_btn" @click="goPage('/pagesA/my/address/addLocate', {}, 'add')">
				<text class="add_plus">+</text>
				新建收货地址
			</button>
		</view>

		<view v-show="isLoadMore && addressList.length > 0">
			<!-- <uni-load-more :status="loadStatus"></uni-load-more> -->
		</view>

		<view class="empty" v-if="addressList.length == 0">
			<image class="empty_img" :src="IMGLink + '/my/no_address_img.png'" mode="heightFix"></image>
			<view>您还没有收货地址哦！</view>
			<button type="default" class="empty_btn" @click="goPage('/pagesA/my/address/addLocate', {}, 'add')">
				新建地址
			</button>
		</view>
	</view>
</template>

<script>
	import {
		addresslist
	} from "@/api/my/address.js";
	import {
		store,
		mutations
	} from "@/store/index.js";
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				addressList: [],
				page: 1, //页码
				size: "10",
				loadStatus: "loading", //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
				reFresh: "",
				operate: "", //操作

				type: "", //是否为选择地址
			};
		},
		watch: {
			//监听reFresh,如果有修改就执行监听器
			reFresh: function() {
				console.log("页面已重新加载");
			},
		},
		computed: {
			...mapState(["addressinfo"]),
		},
		onLoad(options) {
			this.type = options.type;
		},
		created() {},
		onShow() {
			this.getDataList();
		},
		methods: {
			getDataList() {
				uni.showLoading({
					title: "加载中",
				});
				addresslist("getUserAddressList", {
						page: this.page,
						page_size: this.size,
					})
					.then((res) => {
						let datas = res.data.list;

						this.addressList =
							this.page == 1 ? datas : this.addressList.concat(datas);
						this.addressList.map((item, index) => {
							this.$set(this.addressList[index], "checked", false);
						});
						if (datas.length < this.size) {
							//小于size数，停止请求
							this.isLoadMore = true;
							this.loadStatus = "nomore";
						} else {
							this.isLoadMore = false;
						}
						uni.hideLoading();
						if (this.refresh) {
							uni.stopPullDownRefresh();
							this.refresh = false;
						}
					})
					.catch((error) => {
						uni.hideLoading();
						this.isLoadMore = false;
					});
			},
			onPullDownRefresh() {
				this.page = 1;
				this.getDataList();
				this.refresh = true;
			},
			onReachBottom() {
				if (!this.isLoadMore) {
					//此处判断，上锁，防止重复请求
					this.isLoadMore = true;
					this.page++;
					this.getDataList();
				}
			},
			goPage(url, item, type) {
				uni.navigateTo({
					url: `${url}?id=${item.id}&type=${type}`,
				});
				if (Object.keys(item).length != 0) {
					this.$store.commit("setAddressDetail", item);
				}
			},
			// 设为默认地址
			isDefault(item) {
				this.operate = "set";
				this.showToast("确定要设置为默认地址吗？", item.id);
			},
			setDefault(id) {
				uni.showLoading({
					title: "设置中",
				});
				addresslist("setDefaultUserAddress", {
						id: id,
					})
					.then((res) => {
						if (res.code == 200) {
							this.page = 1;
							this.getDataList();
						}
					})
					.catch((error) => {
						uni.hideLoading();
					});
			},
			// 删除
			isDelete(item) {
				this.operate = "delete";
				this.showToast("确定要删除地址吗？", item.id);
			},
			doDelete(id) {
				uni.showLoading({
					title: "删除中",
				});
				addresslist("deleteUserAddress", {
						id: id,
					})
					.then((res) => {
						if (res.code == 200) {
							this.page = 1;
							this.getDataList();
						}
					})
					.catch((error) => {
						uni.hideLoading();
					});
			},
			// 弹框
			showToast(text, id) {
				uni.showModal({
					title: "提示",
					content: text,
					success: (res) => {
						if (res.confirm) {
							if (this.operate == "set") {
								//设置为默认地址
								this.setDefault(id);
							} else if (this.operate == "delete") {
								// 删除地址
								this.doDelete(id);
							}
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			changeIcon(item, index) {
				this.addressList.map((item) => {
					item.checked = false;
				});
				this.$set(this.addressList[index], "checked", true);
				this.$store.commit("setAddressinfo", item);
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.scroll-Y {
		height: 80vh;
	}

	.flexlayout {
		@include flexLayout(center, flex-start);
	}

	.single {
		position: relative;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 40rpx 50rpx 30rpx 0;

		.uncheck_icon {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(-50%, -50%);
			margin-right: 16rpx;
		}

		.username {
			color: #202222;
			font-size: 28rpx;

			.tel {
				margin-left: 30rpx;
			}
		}

		.address_detail {
			line-height: 60rpx;
			@include flexLayout(center, space-between);
			color: #202222;
			font-size: 30rpx;
			font-weight: 500;

			.edit_icon {
				width: 32rpx;
			}
		}

		.operates {
			@include flexLayout(center, flex-start);
			color: #979797;
			font-size: 24rpx;

			.default_img {
				width: 26rpx;
				margin-right: 10rpx;
			}

			.delete_icon {
				width: 30rpx;
				margin-right: 10rpx;
				margin-left: 100rpx;
			}
		}
	}

	.single:first-child {
		border-top: 2rpx solid #f3f3f3;
	}

	.ischoose {
		padding-left: 50rpx;
	}

	.add_btn {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: 90%;
		height: 82rpx;
		line-height: 82rpx;
		background: #f54642;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 5%;

		.add_plus {
			font-size: 42rpx;
			font-weight: 500;
			margin-right: 24rpx;
		}
	}

	.empty {
		margin-top: 40%;
		text-align: center;
		color: #858687;
		font-size: 36rpx;

		.empty_img {
			height: 252rpx;
		}

		.empty_btn {
			width: 218rpx;
			height: 72rpx;
			background: #fdfeff;
			border-radius: 36rpx;
			border: 2rpx solid #979797;
			color: #1a1c1c;
			font-size: 28rpx;
			margin-top: 40rpx;
		}
	}
</style>
